<script setup lang="ts">
import { NumberOutlined } from '@ant-design/icons-vue'
// 测试数据
const data = [
  {
    id: 1,
    title: '全栈开发',
  },
  {
    id: 2,

    title: '后端开发',
  },
  {
    id: 3,

    title: '爬虫',
  },
  {
    id: 3,
    title: '网络安全',
  },
]
</script>
<template>
  <!-- 这里是热门话题组件 -->
  <div class="hot-topic">
    <educ-dynamic-hot-title title="热门话题" :icon="NumberOutlined" />
    <a-list item-layout="horizontal" :data-source="data">
      <template #renderItem="{ item }">
        <a-list-item class="hot-topic-item">
          <a-list-item-meta>
            <template #title>
              <a href="#">{{ item.title }}</a>
            </template>
          </a-list-item-meta>
          <p class="participation">1234人参与</p>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>



<style lang="scss" scoped>
.hot-topic {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background-color: #fff;
  border-radius: .5rem;

  &-item {
    padding: .75rem 0;

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    p {
      font-size: 1.125rem;
    }
  }

  .participation {
    font-size: .625rem;
    color: #999;
  }
}

@media screen and (width <=62rem) {
  .participation {
    display: none;
  }
}
</style>
